﻿<div class="demo-description">
    <h2>
        <DemoNavLink Link="Toolbar#RenderStyle" />Render Style
    </h2>
    <p>
        You can use the following API members to customize the appearance of the Toolbar’s root-level items:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar.ItemRenderStyleMode">DxToolbar.ItemRenderStyleMode</a> - Specifies how to apply the render style to all Toolbar items.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar.ItemSizeMode">DxToolbar.ItemSizeMode</a> - Specifies the Toolbar item’s size.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.RenderStyle">DxToolbarItem.RenderStyle</a> - Specifies the processed item’s render style.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbarItem.RenderStyleMode">DxToolbarItem.RenderStyleMode</a> - Specifies how to apply the render style to the processed item (this property overrides the common <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar.ItemRenderStyleMode">ItemRenderStyleMode</a> property’s value).</li>
    </ul>
</div>

<div class="card demo-card">
    <div class="card-header p-2">
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain" @key="@ThemeName">
            <Items>
                <DxToolbarItem Text="Render Style Mode" Alignment="ToolbarItemAlignment.Right">
                    <Items>
                        @foreach(var renderMode in RenderModes) {
                            <DxToolbarItem Checked="@(renderMode == SelectedRenderMode)" Text="@renderMode.ToString()" Click="()=>SelectedRenderMode = renderMode" />
                        }
                    </Items>
                </DxToolbarItem>
                <DxToolbarItem Text="Size Mode" Alignment="ToolbarItemAlignment.Right">
                    <Items>
                        @foreach(var sizeMode in SizeModes) {
                            <DxToolbarItem Checked="@(sizeMode == SelectedSizeMode)" Text="@sizeMode.ToString()" Click="()=>SelectedSizeMode = sizeMode" />
                        }
                    </Items>
                </DxToolbarItem>
            </Items>
        </DxToolbar>
    </div>
    <div class="card-body">
        <DxToolbar ItemRenderStyleMode="@SelectedRenderMode" ItemSizeMode="@SelectedSizeMode" @key="@ThemeName">
            <Items>
                <DxToolbarItem Text="Info" RenderStyle="ButtonRenderStyle.Info" />
                <DxToolbarItem Text="Success" RenderStyle="ButtonRenderStyle.Success" />
                <DxToolbarItem IconCssClass="tb-icon tb-icon-alert" BeginGroup="true" RenderStyle="ButtonRenderStyle.Danger" Text="Danger" />
                <DxToolbarItem IconCssClass="tb-icon tb-icon-alert" Text="Auto" />
                <DxToolbarItem IconCssClass="tb-icon tb-icon-alert" RenderStyle="ButtonRenderStyle.Warning" Text="Warning" />
            </Items>
        </DxToolbar>
    </div>
</div>

@code{
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }
    IList<ToolbarRenderStyleMode> RenderModes { get; set; }
    ToolbarRenderStyleMode SelectedRenderMode { get; set; }
    IList<SizeMode> SizeModes { get; set; }
    SizeMode SelectedSizeMode { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        RenderModes = new List<ToolbarRenderStyleMode>() { ToolbarRenderStyleMode.Contained, ToolbarRenderStyleMode.Plain };
        SelectedRenderMode = RenderModes[0];

        SizeModes = new List<SizeMode>() { SizeMode.Small, SizeMode.Medium, SizeMode.Large };
        SelectedSizeMode = SizeModes[0];
    }
}

<CodeSnippet_Toolbar_RenderStyle />
